import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import echarts from '@/utils/echarts';

/**
 * 自定义钩子函数useEcharts用于初始化和管理echarts图表的生命周期
 * @param {Object} mapData - 地图数据，用于注册中国地图
 * @returns {Object} - 返回chart ref对象和事件监听方法
 */
export function useEcharts(mapData = {}) {
    // 创建一个ref对象用于后续绑定图表的DOM元素 , 用ref的原因是因为隔离性,
    let chartDom = null;
    let options = ref({});
    // 初始化chartInstance变量，用于存储echarts实例
    let chartInstance = null;

    // 用于存储事件监听器的 Map
    const eventListeners = new Map();

    // 在组件挂载时初始化图表，并监听窗口大小变化事件
    onMounted(() => {
        window.addEventListener('resize',  debounce(resizeChart, 300));
    });

    // 在组件卸载前移除事件监听器，并销毁图表实例
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeChart);
        eventListeners.forEach(({ eventName, callback, query }) => {
            removeEventListener(eventName, callback, query);
        });
        if (!!chartInstance) {
            chartInstance.clear();
            chartInstance.dispose();
            chartInstance = null;
        }
    });

    // 函数防抖
    const debounce = (func, wait) => {
        let timeout;
        return function(...args) {
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    };

    /**
     * 初始化图表的方法
     * - 如果提供了地图数据，则注册地图
     * - 使用echarts初始化图表，并设置配置项
     * @param { String} chartDom - 承载图表的dom元素
     * @param {Object} options - 图表的配置项
     * @param {Object} config - 额外的配置项，用于初始化图表（可选）
     * @param {String} theme - 图表的主题，默认为 'light'（可选）
     */
    const initChart = (dom,options = {},theme = 'light',config = {}) => {
          chartDom = dom;
          options = options;
        try {
            if (mapData && typeof mapData === 'object' && Object.keys(mapData).length > 0) {
                registerMap();
            }
            if (!chartInstance) {
                chartInstance = echarts.init(chartDom,theme,config);
            }
            chartInstance.setOption(options);
        } catch (error) {
            console.error('初始化图表时出错:', error);
        }
    };

    /**
     * 获取Echarts实例
     */
    const getEchartsInstance = () => {
        return chartInstance;
    };

    /**
     * 调整图表大小的方法
     * - 当窗口大小变化时调用此方法调整图表大小
     */
    const resizeChart = () => {
        if (chartInstance) {
            chartInstance.resize();
        }
    };

    /**
     * 注册中国地图的方法
     * - 向echarts注册地图数据，以便在图表中使用
     */
    const registerMap = () => {
        try {
            // 检查地图是否已经注册
            if (!echarts.getMap('china')) {
                echarts.registerMap('china', mapData);
            }
        } catch (error) {
            console.error('注册地图时出错:', error);
        }
    };

    /**
     * 添加事件监听器的方法
     * @param {string} eventName - 事件名称
     * @param {Function} callback - 事件回调函数
     * @param {Object} query - 事件触发过滤条件
     */
    const addEventListener = (eventName,callback,query={}) => {
        try {
            if (chartInstance) {
                chartInstance.on(eventName,query, callback);
                const listenerKey = generateListenerKey(eventName, query);
                if (!eventListeners.has(listenerKey)) {
                    eventListeners.set(listenerKey, { eventName, callback, query });
                }
            }
        } catch (error) {
            console.error('添加监听器出错:', error);
        }
    };

    /**
     * 移除事件监听器的方法
     * @param {string} eventName - 事件名称
     * @param {Function} callback - 事件回调函数
     * @param {Object} [query={}] - 事件触发过滤条件（可选）
     */
    const removeEventListener = (eventName, callback, query = {}) => {
        try {
            if (chartInstance) {
                chartInstance.off(eventName,query, callback);
                const listenerKey = generateListenerKey(eventName, callback, query);
                if (eventListeners.has(listenerKey)) {
                    eventListeners.delete(listenerKey);

                }
            }
        } catch (error) {
            console.error('移除监听器时出错:', error);
        }
    };

    // 生成监听的Key
    const generateListenerKey = (eventName, query) => {
        return `${eventName}-${JSON.stringify(query)}`;
    }

    // 监听options变化，动态更新图表配置项
    watch(options,
        (newOptions) => {
            if (chartInstance) {
                chartInstance.setOption(newOptions);
            }
        },
        { deep: true }
    );

    // 监听mapData变化，动态更新注册地图并更新图表
    watch(mapData,
        (newMapData) => {
            if (chartInstance && newMapData && typeof newMapData === 'object' && Object.keys(newMapData).length > 0) {
                registerMap();
                chartInstance.setOption(options);
            }
        },
        { deep: true }
    );

    return {
        initChart,
        getEchartsInstance,
        addEventListener,
        removeEventListener
    };
}
